<template>
<div class="app">
    <div class="d1" v-for="item in data.val" :key="item">
        
            <van-image
        class="v1"
        round
        width="2.5rem"
        height="2.5rem"
        :src="item.img"/>
        <div class="d2">
            <p>{{item.mastername}}</p>
            <p class="p1">2020/10/09 12:09:09</p>
        </div>
        <button class="b1" @click="dj">{{an}}
              
        </button>
        
        
        <van-row justify="space-around" class="v3">
        <img class="i1" :src="item.before" >
        <img class="i2" :src="item.last" >
        </van-row> 
        <p class="p2">眼综合+全脸脂肪填充后10个月前后对比,做完手术也有10个月左右了,今天和大家分…</p>  
        <div class="d3" @click="dj1(item)"><img :src="src" >
        <span class="s1">{{item.lovenum}}</span>
        <img class="i3" src="@/assets/u1349.png">
        <span class="s1">{{item.leavemessage}}</span>
        </div>
        
    </div>
    <van-loading size="24px" type="spinner" class="v2">正在加载</van-loading>
</div>
</template>

<script  setup lang="ts">
import {beautifuldiary} from "@/api/beautiful"
import {  reactive, ref } from "vue";


let src =ref("/src/assets/u1246.png")

let ys=ref('#ec7b67')
let ys1=ref('white')
let an=ref('+关注')
let show = ref(false);
let data=reactive({
    val:[]
})


function dj(){
    
    
    if(an.value=='+关注'){
        an.value='已关注'
        ys1.value='red'
        ys.value='#fdf2f0'
    }else if(an.value=='已关注'){
        an.value='+关注'
        ys1.value='white'
        ys.value='#ec7b67'
    }
}
function dj1(item:any){
    
    
    if(src.value=="/src/assets/u1246.png"){
        item.lovenum=item.lovenum+1
        src.value="/src/assets/u1248.png"
    }else if(src.value=="/src/assets/u1248.png"){
        item.lovenum=item.lovenum-1
        src.value="/src/assets/u1246.png"
    }
} 
beautifuldiary()
    .then((res:any)=>{  
        
        data.val = JSON.parse(JSON.stringify(res.data.data));
        
        
        
    })

</script>

<style scoped>
    .i3{margin-left: 10%;}
    .s1{margin-left: 5%;font-size: 12px;color: #999999;}
     .d3{margin-top: -3%;margin-left: 70%;height: 40px;}
    .p2{padding: 5%;margin-top: -2%;}
    
    .v3{margin-top: 7%;}
    .i1{width: 160px;height: 110px;}
    .i2{width: 160px;height: 110px;}
    .b1{width:66px;height: 26px;background:v-bind(ys) ;border: none;border-radius: 5px;margin-left: 37%;color: v-bind(ys1);font-size: 12px;margin-top: 6%;}
    .d1{background:white;width: 100%;margin-bottom: 3%;}
    .d2{float: left;margin-top: 5%;}
    .v1{float: left;margin-top: 5%;margin-left: 4%;}
    .p1{font-size: 12px;color: #dacfcf;}
    .app{width: 390px;height: 1770px;background: #fbf9f6}
    .v2{margin-left: 40%;}
</style>